<template>
    <div class="newsListTop">
        <ul v-if="newsList">
            <li @click="pathGo(item)" v-for="item in newsList">
                <h4>{{ item.digest }}</h4>
                <span>置顶</span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted, nextTick, reactive } from "vue";
import { undateUserWeb } from "@/request/index";

const store = useStore();
let router = useRouter();
let newsList = computed(() => {
    let allList = store.state.myRoute.newsList;
    allList = allList.filter((item) => {
        return item.hot == 1;
    });
    return allList;
});
// onMounted(() => {
//     nextTick(() => {
//         newsList = store.state.myRoute.newsList;
//         console.log(newsList, 222);

//         newsList = newsList.filter((item) => {
//             return item.hot == 1;
//         });
//         console.log(newsList);
//     });
// });
let user_id = localStorage.getItem("token");
const pathGo = (x) => {
    router.push({ path: "/newsDetail", query: x });
    // console.log(x.id, 454);
    undateUserWeb({ user_id, comment_db: "comment", comment_id: x.id, comment: x.digest }).then((data) => {
        // console.log("undateUserWeb", data);
    });
};
</script>
<style lang="scss">
@import "../static/style/variable.scss";
.newsListTop {
    padding: 0 10px;
    color: #333;
    li {
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        h4 {
            font-size: 17px;
            margin-bottom: 0.2rem;
            line-height: 20px;
        }
        span {
            font-size: 12px;
            border: 1px solid $activeColor;
            border-radius: 4px;
            padding: 0 2px;
            color: $activeColor;
        }
    }
}
</style>
